<template lang="html">
    <div class="container_return">
        <mt-header fixed title="补卡记录">
            <mt-button slot="left" icon="back" @click="Returnclick"></mt-button>
        </mt-header>
        <ul>
            <li v-for="(item,index) in checkindata" :key="index">
                <section class="reissue-cord">
                    <img src="../assets/image/cordperson.png" alt="" />
                    <div class="reissue-con">
                        <strong>{{item.name}}</strong>
                        <span :class="{ bule : item.check_status == 1 }">{{item.check_status_desc}}</span>
                    </div>
                </section>
                <section class="reissue-detail">
                    <span>补卡班次</span>
                    <p>{{item.time}}<br/>{{item.recheckin_time}}</p>
                </section>
                <section class="reissue-conpany">
                    <div>
                        <span>所在公司</span>
                        <p>{{item.company}}</p>
                    </div>
                    <div>
                        <span>缺卡原因</span>
                        <p>{{item.reason}}</p>
                    </div>
                </section>
                <section class="reissue-icon" v-if="item.check_status == 2">
                    <img src="../assets/image/cordget.png"/>
                </section>
                <section class="reissue-icon"  v-if="item.check_status == 3">
                    <img src="../assets/image/cordrefuse.png"/>
                </section>
            </li>
        </ul>
        <span class="bottom-title" v-if="loadhide" @click="loaddataadd"><span>点击加载更多</span></span>
    </div>
</template>
<script>
import app from '~/assets/api/config'

export default {
    data() {
        return {
            checkindata: [], //列表数据
            loadhide: true,
            numadd: 1 //页码
        }
    },
    mounted() {
        this.getlistdata()
    },
    methods: {
        Returnclick() {
            //返回
            this.$router.go(-1)
        },
        getlistdata() {
            //列表
            this.$axios
                .post(app.API_BES_URL + '/api/backend/v1/checkin/relist', {
                    page: this.numadd,
                    page_size: 5
                })
                .then(res => {
                    if (res.data.code == 0) {
                        this.checkindata = this.checkindata.concat(
                            res.data.data.data
                        )
                        if (res.data.data.data.length < 5) {
                            this.loadhide = false
                        }
                    }
                })
        },
        loaddataadd() {
            //分页
            this.numadd++
            this.getlistdata()
        }
    }
}
</script>

<style scoped lang="less">
* {
    margin: 0;
    padding: 0;
}
.container_return {
    ul {
        list-style: none;
        padding-top: 80px;
        li {
            position: relative;
            background: #fff;
            margin-bottom: 25px;
            padding: 55px 0 100px 33px;
            .reissue-cord {
                border-bottom: 1.25px solid #e5e5e5;
                padding-bottom: 24px;
                display: flex;
                justify-content: flex-start;
                img {
                    display: block;
                    width: 87.5px;
                    height: 87.5px;
                    margin-right: 16px;
                }
                .reissue-con {
                    strong {
                        display: block;
                        color: #2e2e2e;
                        font-size: 32px;
                    }
                    span {
                        display: block;
                        color: #9b9a9a;
                        margin-top: 12.5px;
                        font-size: 26px;
                    }
                    .bule {
                        color: #3577ff;
                    }
                }
            }
            .reissue-detail {
                border-bottom: 1.25px solid #e5e5e5;
                display: flex;
                justify-content: flex-start;
                align-items: flex-start;
                padding: 30px 0 34px;
                span {
                    display: block;
                    color: #9b9a9a;
                    font-size: 30px;
                    width: 20%;
                    line-height: 40px;
                    margin-right: 12.5px;
                }
                p {
                    width: 76%;
                    display: block;
                    color: #2e2e2e;
                    font-size: 30px;
                    line-height: 40px;
                    text-align: justify;
                }
            }
            .reissue-conpany {
                div {
                    display: flex;
                    justify-content: flex-start;
                    margin-top: 28px;
                    span {
                        display: block;
                        color: #9b9a9a;
                        font-size: 30px;
                        width: 20%;
                        margin-right: 12.5px;
                    }
                    p {
                        width: 76%;
                        display: block;
                        color: #2e2e2e;
                        font-size: 30px;
                        line-height: 36px;
                        text-align: justify;
                    }
                }
            }
            .reissue-icon {
                position: absolute;
                width: 265px;
                height: 189px;
                top: 30px;
                right: 40px;
                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
    .bottom-title {
        text-align: center;
        float: left;
        width: 100%;
        height: 75px;
        margin-top: 22.5px;
        margin-bottom: 15px;
        span {
            display: block;
            font-size: 22.5px;
            color: #ddd;
            position: relative;
        }
        span:before,
        span:after {
            content: '';
            position: absolute;
            top: 52%;
            background: #ddd;
            width: 30%;
            height: 2.25px;
        }
        span:before {
            left: 10%;
        }
        span:after {
            right: 10%;
        }
    }
}
</style>
<style>
.mint-header {
    font-size: 0.45rem !important;
    height: 1.173333rem !important;
    background: #fff !important;
    color: #2e2e2e !important;
    border-bottom: 0.016667rem solid #f8f8f8 !important;
    line-height:1;
}
.mint-header-title {
    font-size: 0.426667rem !important;
}
.mint-header .mintui {
    font-size: 0.45rem;
}
</style>

